﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>IMES</title>
</head>
<body>
    <div class="layui-panel">

        <div class="layui-panel" style="margin-top: 20px;">

            <div style="padding: 32px;">
                <div class="layui-form-item">

                    <div class="layui-form-item">
                        <label class="layui-form-label">产品编码:</label>
                        <div class="layui-input-block">
                            <input type="text" Id="productNumber" placeholder="请输入产品编码" style="width: 150px" autocomplete="off" class="layui-input">
                        </div>

                        <label class="layui-form-label">产品名称:</label>
                        <div class="layui-input-block">
                            <input type="text" Id="productName" placeholder="请输入产品名称" style="width: 150px" autocomplete="off" class="layui-input">
                        </div>
                        <button class="layui-btn ">查询</button>
                        <button class="layui-btn " lay-event="import">导入</button>
                    </div>

                </div>
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th></th>
                            <th>
                                <input type="checkbox" name="check" value="1" lay-filter="demo-checkbox-filter"></input>
                            </th>
                            <th>产品编号</th>
                            <th>产品名称</th>
                            <th>库存单位</th>
                            <th>产品规格</th>
                        </tr>
                    </thead>
                    <tbody id="body">
                    </tbody>
                </table>
                <div id="demo-laypage-all"></div>
                <div style="float:right">
                    <button class="layui-btn layui-btn-sm" id="anotherButtonId">添加选择的数据</button>
                    <button class="layui-btn layui-btn-sm">关闭</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="//unpkg.com/layui@2.9.20/dist/layui.js"></script>
    <script>
        layui.use(function () {
            var form = layui.form
            var laypage = layui.laypage;
            var $ = layui.$;
            var layer = layui.layer;
            var util = layui.util;
            var pindex = 1;
            var psize = 5;
            // 导入execel
            util.on(
                'lay-event', {
                'import': function () {
                    layer.open({
                        type: 2,
                        area: ['400px', '400px'],
                        shadeClose: true,
                        title: '导入产品',
                        content: '/Orders/ImportProductView',
                    });
                }
            });
            $(function () {
                getList();
            })

            //产品列表显示
            function getList() {
                $.ajax({
                    url: '@ViewBag.Darius' + "/api/Orders/SearchProduct",
                    type: "post",
                    data: JSON.stringify({
                        productNumber: $("#productNumber").val() || "",
                        productName: $("#productName").val() || "",
                        pindex: pindex,
                        psize: psize
                    }),
                    dataType: "json",
                    contentType: "application/json",
                    success: function (res) {
                        console.log(res)
                        $("#body").empty();
                        $(res.data).each(function (i, item) {
                           
                            $("#body").append(`<tr>
                                                           <td>${i + 1}</td>
                                                           <td>
                                                               <input type="checkbox" name="check" value="${this.productId}" lay-filter="demo-checkbox-filter" ></input>
                                                           </td>
                                                           <td>${this.productNumber}</td>
                                                           <td>${this.productName}</td>
                                                           <td>个</td>
                                                           <td>${this.productSpecification}</td>

                                                       </tr>`)
                        })
                        console.log(996, pindex, psize, res);
                        laypage.render({
                            elem: 'demo-laypage-all', // 元素 id
                            curr: pindex,//当前页
                            pages: res.totalPage,    //总页数
                            limit: psize,//每页几条
                            limits: [5, 10, 15],
                            count: res.totalCount, // 数据总数
                            prev: '<i class="layui-icon layui-icon-left"></i>',
                            next: '<i class="layui-icon layui-icon-right"></i>',
                            first: '首页',
                            last: '尾页',
                            layout: ['count', 'prev', 'page', 'first', 'last', 'next', 'limit', 'skip'], // 功能布局
                            jump: function (obj, first) {
                                if (!first) {
                                    console.log(888, obj);
                                    console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
                                    console.log(obj.limit); // 得到每页显示的条数
                                    pindex = obj.curr;
                                    psize = obj.limit;
                                    getList();
                                }
                            }
                        });

                    }
                })
            }
        });






        function addSelectData() {
            //拿到选中的数据的id
            var id = $(":checkbox:gt(0):checked").map(function () {
                return $(this).val();
            }).get().join(",");
            console.log(id);
            localStorage.setItem("check", id);
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index)
            parent.location.reload();

        }


        // 绑定事件，例如点击另一个按钮时调用addSelectData
        $('#anotherButtonId').on('click', function () {
            addSelectData();
        });



    </script>
</body>
</html>
